---
title: "Heading"
description: A typographic element that enhances readability and SEO by defining section titles with hierarchical importance.
order: 4
published: true
---

## Basic
This is a standard heading.
<How toUse="surfaces/heading/heading-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/heading
```

## Anatomy
```
import { Heading } from "@/components/ui/heading"
```

```
<>
 <Heading level={1}>The quick brown fox jumps over the lazy dog</Heading>
 <Heading level={2}>The quick brown fox jumps over the lazy dog</Heading>
 <Heading level={3}>The quick brown fox jumps over the lazy dog</Heading>
 <Heading level={4}>The quick brown fox jumps over the lazy dog</Heading>
</>
```

## Manual installation
<SourceCode toShow='heading'/>

## Heading levels
By default, when a heading is used on a [card component](/docs/components/surfaces/card), it will default to level `3`. Titles range from levels `1` to `4`. Each level determines the title type and font size.
<How toUse="surfaces/heading/heading-level-demo" />
